<template>
  <c-form-dialog
    ref="form"
    :visible.sync="innerVisible"
    :form-items="formItems"
    :form-data="formData"
    :table-name="tableName"
    :table-id="tableId"
    @close="handleClose"
    @success="handleSuccess"
    :before-save="handleBeforeSave"
  ></c-form-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { idCardValidate, licenseValidate } from '@vimi/utils-tool'
import { phoneValidator } from '@/common/plugins/validator'
import { enumBHType, enumLoadStatus } from '@/bigcredit/views/ledger/LedgerLetter'
export default {
  components: {},
  props: {
    visible: Boolean,
    tableId: String,
    formData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    const certNoValidator = (rule, value, callback) => {
      if (value === '') {
        callback()
      } else if (!licenseValidate(value) && !idCardValidate(value)) {
        callback(new Error('错误的证件号，请重新输入'))
      } else {
        callback()
      }
    }
    const isNumberValidator = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!Number.isFinite(+value)) {
        callback(new Error('请输入正确的数值'))
      } else {
        callback()
      }
    }
    return {
      innerVisible: false,
      tableName: 'BHTZ',
      formItems: [
        {
          tag: 'input',
          itemAttrs: {
            label: '客户名称',
            rules: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
          },
          attrs: { key: 'QYMZ', value: '', placeholder: '请输入客户名称' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '证件号',
            rules: [
              { required: true, message: '请输入证件号', trigger: 'blur' },
              { validator: certNoValidator, trigger: 'blur' },
            ],
          },
          attrs: { key: 'ZJH', value: '', placeholder: '请输入证件号' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '联系人',
            rules: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
          },
          attrs: { key: 'LXR', value: '', placeholder: '请输入联系人' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '联系电话',
            rules: [
              { required: true, message: '请输入手机号码', trigger: 'blur' },
              {
                validator: phoneValidator,
                message: '请输入正确的手机号码',
                trigger: 'blur',
              },
            ],
          },
          attrs: { key: 'LXDH', value: '', placeholder: '联系电话' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '对方单位',
          },
          attrs: { key: 'DFDW', value: '', placeholder: '请输入对方单位' },
        },
        {
          tag: 'select',
          itemAttrs: {
            label: '保函类型',
            rules: [{ required: true, message: '请选择保函类型', trigger: 'change' }],
          },
          attrs: {
            key: 'BHLXMJ',
            placeholder: '请选择保函类型',
            options: enumBHType,
          },
        },

        {
          tag: 'input',
          itemAttrs: {
            label: '保函金额',
            rules: [
              { required: true, message: '请输入保函金额', trigger: 'blur' },
              { validator: isNumberValidator, trigger: 'blur' },
            ],
          },
          attrs: { key: 'BHJE', value: '', placeholder: '请输入保函金额' },
          tagSlots: [{ name: 'append', slot: '万元' }],
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '保函编号',
            rules: [{ required: true, message: '请输入保函编号', trigger: 'blur' }],
          },
          attrs: { key: 'BHBH', value: '', placeholder: '请输入保函编号' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '担保费率',
            rules: [
              // { required: true, message: '请输入担保费率', trigger: 'blur' },
              { validator: isNumberValidator, trigger: 'blur' },
            ],
          },
          attrs: {
            key: 'DBFL',
            value: '',
            placeholder: '请输入担保费率',
          },
          tagSlots: [{ name: 'append', slot: '%' }],
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '担保费用',
            rules: [{ validator: isNumberValidator, trigger: 'blur' }],
          },
          attrs: {
            key: 'DBFY',
            value: '',
            placeholder: '请输入担保费用',
          },
          tagSlots: [{ name: 'append', slot: '元' }],
        },
        {
          tag: 'date',
          itemAttrs: {
            label: '开函时间',
            rules: [{ required: true, message: '请选择开函时间', trigger: 'change' }],
          },
          attrs: { key: 'KHSJ', value: '', placeholder: '请选择开函时间' },
        },
        {
          tag: 'date',
          itemAttrs: {
            label: '到期时间',
            rules: [{ required: true, message: '请选择到期时间', trigger: 'change' }],
          },
          attrs: { key: 'DQSJ', value: '', placeholder: '请选择到期时间' },
        },
        {
          tag: 'date',
          itemAttrs: {
            label: '解除时间',
          },
          attrs: { key: 'JCSJ', value: '', placeholder: '请选择解除时间' },
        },
        {
          tag: 'select',
          itemAttrs: {
            label: '项目状态',
            rules: [{ required: true, message: '请选择项目状态', trigger: 'change' }],
          },
          attrs: {
            key: 'ZTMJ',
            placeholder: '请选择项目状态',
            options: enumLoadStatus,
          },
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {
    visible(val) {
      this.innerVisible = val
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleBeforeSave(model) {
      model.submit_client_id = this.clientId
      return model
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleSuccess(res) {
      this.$emit('success', res)
    },
  },
}
</script>
<style lang="scss" scoped></style>
